﻿@{
    ViewBag.Title = "个人中心";
    Layout = "~/Views/Shared/_UserCenter.cshtml";
}

<div class="mod_main">
    <div class="jib_xinx_kuang">
        <div class="wt">
            <ul>
                <li><a href="@Url.Action("UserInfo","User")">个人信息</a></li>
                <li class="dangq_hongx"><a href="@Url.Action("UserProtrait","User")">设置头像</a></li>
                <li><a href="@Url.Action("UserInfoMore","User")">更多个人信息</a></li>
            </ul>
        </div>

        <form action="/User/UploadImg" id="frmUploadImg" method="post" enctype="multipart/form-data">
            <div class="wd">
                <div class="up_avater">
                    <div class="warp_tip">


                        <!--选择文件-->
                        <input id="up_avater_btn" class="avater_btn" type="file" name="file1">



                        <div class="upload_tip">
                            <p class="upload_text">仅支持JPG、JPEG、PNG图片文件，且文件小于2M</p>
                        </div>
                        <div class="upload_main">
                            <div class="up-left">
                                <div class="pic-show">
                                    <div class="pic-wrap">
                                        @*<img src="~/Content/images/7_170312181624_2.jpg">*@

                                        <!--图片预览-->
                                        <img id="img-one" src="~/Content/images/7_170312181624_2.jpg" alt="" />

                                    </div>
                                </div>
                            </div>
                            <div class="up-right">
                                <div class="up-right-title">
                                    <h5>效果预览</h5>
                                    <p>你上传的图片会自动生成3种尺寸，请注意小尺寸的图片是否清晰</p>
                                </div>
                                <div class="up-top">
                                    <div class="pic-100-box">
                                        <div class="pic-100">
                                            @*<img src="~/Content/images/7_170312181624_2.jpg">*@
                                            <img id="img-two" src="~/Content/images/7_170312181624_2.jpg" alt="" />
                                        </div>
                                        <span class="pic-tip">100X100像素</span>
                                    </div>
                                </div>
                                <div class="uc_container">
                                    <div class="up-bottom uc-pic-img">
                                        <div class="pic-60-box">
                                            <div class="pic-60">
                                                @*<img src="~/Content/images/7_170312181624_2.jpg">*@
                                                <img id="img-three" src="~/Content/images/7_170312181624_2.jpg" alt="" />
                                            </div>
                                            <span class="pic-tip">60X60像素</span>
                                        </div>
                                    </div>
                                    <div class="uc-min uc-pic-img">
                                        <div class="pic-30-box">
                                            <div class="pic-30">
                                                @*<img src="~/Content/images/7_170312181624_2.jpg">*@
                                                <img id="img-four" src="~/Content/images/7_170312181624_2.jpg" alt="" />
                                            </div>
                                            <span class="pic-tip">30X30像素</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="upload_btn_box">
                        <input type="submit" id="btnFileImg" value="保存" class="save-btn" style="background-color: #E55240;">
                    </div>
                </div>
            </div>
        </form>
</div>
</div>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
    //Javascript代码
    $(function () {
        $("#up_avater_btn").on("change", function () {
            var file = this.files[0];

            if (this.files && file) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    //预览图片
                    $('#img-one').attr('src', e.target.result);
                    $('#img-two').attr('src', e.target.result);
                    $('#img-three').attr('src', e.target.result);
                    $('#img-four').attr('src', e.target.result);

                }
                reader.readAsDataURL(file);
            }
        });
    });



</script>